<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="140px" :model="form" :rules="rules">
      <el-form-item label="请选择产品或赠品" prop="ProductType">
        <el-select
          v-model="form.ProductType"
          style="width: 100px"
          @change="form.OrderListID = null"
        >
          <el-option label="产品" :value="0" />
          <el-option label="赠品" :value="1" />
        </el-select>

        <el-select
          v-if="form.ProductType == 0"
          v-model="form.OrderListID"
          style="width: 250px; margin-left: 10px"
          @change="getOrderListID"
        >
          <el-option
            v-for="item in OrderList"
            :key="item.OrderListID"
            :label="item.ProductName"
            :value="item.OrderListID"
          />
        </el-select>

        <el-select
          v-if="form.ProductType == 1"
          v-model="form.OrderListID"
          style="width: 250px; margin-left: 10px"
          @change="getOrderListID"
        >
          <el-option
            v-for="item in GiftList"
            :key="item.OrderListID"
            :label="item.ProductName"
            :value="item.OrderListID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="退款金额" prop="ChangeJson.Refundmoney">
        <el-input v-model="form.ChangeJson.Refundmoney" type="number" />
      </el-form-item>
      <el-form-item label="退款原因" prop="ChangeReasonID">
        <el-select v-model="form.ChangeReasonID">
          <el-option
            v-for="(item, index) in ReasonOption"
            :key="index"
            :label="item.LabelName"
            :value="item.LabelID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="原因备注" prop="ChangeMemo">
        <el-input v-model="form.ChangeMemo" />
      </el-form-item>
      <el-form-item label="退款审批截图" prop="ChangePics">
        <el-upload
          :file-list="form.ChangePics"
          :multiple="true"
          class="avatar-uploader"
          action="https://api.sanjianke.com/common/Upload/upload?file=storeTransaction&type=image"
          list-type="picture-card"
          accept="image/png, image/jpeg"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="更改服务状态">
        <el-select
          v-model="form.ChangeJson.FankState"
          @change="getserviceState"
        >
          <el-option label="部分退款继续服务" :value="1" />
          <el-option label="退款并终止服务" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script>
  import { getReasonOption } from '@/api/common'
  import { saveOrderChange } from '@/api/businessOrder'

  export default defineComponent({
    name: 'RefundEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const { fetchData } = inject('rootMethods')
      const state = reactive({
        OrderList: [],
        GiftList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          'ChangeJson.RefundType': [
            { required: true, trigger: 'blur', message: '请输入退款类型' },
          ],
          'ChangeJson.Refundmoney': [
            { required: true, trigger: 'blur', message: '请输入退款金额' },
          ],
          ChangeMemo: [
            { required: true, trigger: 'blur', message: '请输入退款原因' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        ReasonOption: [],
      })

      const showEdit = (row, OrderList, GiftList) => {
        state.OrderList = OrderList
        state.GiftList = GiftList
        state.title = '退款'
        state.form = Object.assign({}, row)
        state.form.ProductType = row.ProductType
        if (!row.OrderListID) {
          state.form.OrderListID = OrderList[0]?.OrderListID
        }
        if (!row.OrderChangeID) {
          state.form.OrderChangeID = 0
        }
        if (!row.ChangePics) {
          state.form.ChangePics = []
        } else {
          state.form.ChangePics = JSON.parse(row.ChangePics)
        }
        if (row.ChangeJson) {
          state.form.ChangeJson = JSON.parse(row.ChangeJson)
        } else {
          state.form.ChangeJson = {}
        }
        getReasonOptions()
        state.dialogFormVisible = true
      }

      const getReasonOptions = async () => {
        const getReasonParams = {
          ReasonClassID: 8,
        }
        const {
          data: { ReasonOption },
        } = await getReasonOption(getReasonParams)
        state.ReasonOption = ReasonOption
      }

      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          ChangePics: [],
          ChangeJson: {},
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        console.log(state.form, 'ces')
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const dataMsg = {
              ChangeReasonID: state.form.ChangeReasonID,
              OrderChangeID: state.form.OrderChangeID,
              OrderID: state.form.OrderID,
              OrderListID: state.form.OrderListID,
              ActType: 6,
              ChangeJson: state.form.ChangeJson,
              ChangeMemo: state.form.ChangeMemo,
              ChangePics: state.form.ChangePics,
            }
            const { msg } = await saveOrderChange(dataMsg)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            fetchData()
            close()
          }
        })
      }
      const handleRemove = (row) => {
        const index = state.form.ChangePics.findIndex((fileItem) => {
          console.log(fileItem.url, row.response.data.url, '123')
          return fileItem.url === row.response.data.url
        })
        state.form.ChangePics.splice(index, 1)
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.form.ChangePics.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
      }

      const handlePictureCardPreview = (uploadFile) => {
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      return {
        ...toRefs(state),
        showEdit,
        getReasonOptions,
        handlePictureCardPreview,
        handleAvatarSuccess,
        handleRemove,
        close,
        save,
      }
    },
  })
</script>
